<template>
  <!-- hidden PageHeaderWrapper title demo -->
  <page-header-wrapper :title="false" content="安全设置">
    <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
      <a-alert type="warning" description="开启强密码后，员工登录时必须将密码修改为强密码（同时包含大写字母、小写字母、数字、特殊符号，长度不少于12位）。" />
      <a-form @submit="handleSubmit" :form="form">
        <a-form-item v-show="false" label="ID">
          <a-input v-decorator="['id']" disabled />
        </a-form-item>
        <a-form-item
          label=""
          :labelCol="{lg: {span: 7}, sm: {span: 7}}"
          :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
          <a-checkbox v-model="checked"> 强密码 </a-checkbox>
        </a-form-item>
        <a-divider />
        <a-form-item
          :wrapperCol="{ span: 16 }"
          style="text-align: center"
        >
          <a-button htmlType="submit" type="primary" icon="check">保存</a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { getPasswordSettingUsingPOST, updatePasswordSettingUsingPOST } from '@/api/api/xitongguanli.ts'
export default {
  name: 'Safe',
  data () {
    return {
      form: this.$form.createForm(this),
      loading: false,
      checked: false,
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      getPasswordSettingUsingPOST()
        .then((res) => {
          this.form.setFieldsValue({ id:res.data.id })
          const val = res.data.value === '1' ? true : false
          this.checked = val
        })
        .catch((error) => {
          this.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
        })
    },
    // handler
    handleSubmit (e) {
      e.preventDefault()
      this.loading = true
      this.form.validateFields((err, values) => {
        if (!err) {
          updatePasswordSettingUsingPOST({ id:values.id, value: this.checked ? '1' : '0' })
            .then(() => {
              this.$message.success('操作成功')
              this.loading = false
            })
            .catch((error) => {
              this.loading = false
              this.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
            })
        }
      })
    }
  }
}
</script>